<template>
  <div class="page-select-service">
    <ul class="tab-list">
      <li class="tab" @click="changeType(0)" :class="{active: current === 0}">仅定金</li>
      <li class="tab" @click="changeType(1)" :class="{active: current === 1}">已付全款</li>
    </ul>
    <swiper class="content-list" :current="current" @change="changeSwiper">
      <swiper-item>
        <scroll-view scroll-y class="content">
          <div class="title">
            已选下单方式
            <div class="btn-add" @click="toAdd">+添加</div>
          </div>
          <ul class="item-list">
            <li class="item" v-for="(data,index) in servicePayVO" :key="index">
              <div class="goods-name">{{data.partPayAmount}}</div>
              <div class="goods-name">{{data.payTypeStr}}</div>
              <img @click="remove(index)" class="btn-delete" src="/static/images/common/remove.png">
            </li>
          </ul>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y class="content">
          <picker mode="selector" :range="payTypeList" range-key="payTypeStr" @change="changePayType" :value="serviceFullPayVO.payType">
            <div class="picker" :class="serviceFullPayVO.payTypeStr ? '':'disabled'">
              {{serviceFullPayVO.payTypeStr ? serviceFullPayVO.payTypeStr :
              "请选择付款方式"}}
              <img class="icon" src="/static/images/common/right.png">
            </div>
          </picker>
        </scroll-view>
      </swiper-item>
    </swiper>
    <div class="btn-submit" @click="toSelect">确定提交</div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        goodsList: [],
        dataList: [],
        orderPayType: 2,
        current: 0,
        payTypeList: [],
        serviceFullPayVO: {
          payType: '',
          payTypeStr: '',
          payStatus: 3,
        },
        servicePayVO: [],
      };
    },
    components: {},
    methods: {
      changeSwiper(e) {
        this.current = e.mp.detail.current;
        App.orderPayType = this.current === 0 ? 2 : 3;
      },
      changeType(type) {
        this.current = type;
        App.orderPayType = this.current === 0 ? 2 : 3;
      },
      remove(index) {
        this.servicePayVO.splice(index, 1);
        App.servicePayVO.splice(index, 1);
      },
      toAdd() {
        wx.navigateTo({
          url: "/pages/select-pay/main"
        });
      },
      changePayType(e){
        this.serviceFullPayVO = this.payTypeList[e.mp.detail.value];
      },
      toSelect() {
        if(this.orderPayType === 2 && !this.servicePayVO.length){
          wx.showToast('请添加付款方式');
          return false;
        }
        if(this.orderPayType === 3 && !this.serviceFullPayVO.payType){
          wx.showToast('请选择付款方式');
          return false;
        }
        wx.navigateBack();
      }
    },
    async onShow() {
      if(!App.orderPayType){
        App.orderPayType = 2;
      }
      this.current = App.orderPayType === 3 ? 1 : 0;
      App.servicePayVO = App.servicePayVO || [];
      if(this.current === 1){
        this.serviceFullPayVO = App.payTypeList[0];
        App.serviceFullPayVO = this.serviceFullPayVO;
      }else{
        this.servicePayVO = App.servicePayVO;
      }
      wx.showLoading();
      const result = await wx.request({
        url: '/bg/payType/listPage',
        data: {
          page: 1,
          pageSize: 50,
        }
      });
      wx.hideLoading();
      if (result.code === 200) {
        const list = [];
        result.data.rows.forEach(data => {
          list.push(_.pick(data, [ "payType", "payTypeStr" ]));
        });
        this.payTypeList = list;
      } else {
        wx.showToast(result.message);
      }
    }
  };
</script>

<style lang="scss">
  @import "../../styles/base";

  .page-select-service {
    .content-list {
      height: 100vh;
      .content {
        padding-top: pxToRem(100);
        padding-bottom: pxToRem(160);
        height: 100vh;
        box-sizing: border-box;
      }
    }
    .tab-list {
      @include middle-center-x();
      top: 0;
      width: pxToRem(750);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 pxToRem(4) pxToRem(6) 0 rgba(204, 204, 204, 0.5);
      z-index: 1000;
      .tab {
        flex: 1;
        padding-top: pxToRem(22);
        padding-bottom: pxToRem(22);
        color: #707070;
        font-size: pxToRem(32);
        line-height: pxToRem(44);
        text-align: center;
        &.active {
          color: #44BDF5;
        }
      }
    }
    .title {
      position: relative;
      padding: pxToRem(40) pxToRem(30) pxToRem(10);
      font-size: pxToRem(32);
      color: #707070;
      .btn-add {
        position: absolute;
        top: pxToRem(40);
        right: pxToRem(40);
        width: pxToRem(140);
        height: pxToRem(50);
        line-height: pxToRem(50);
        font-size: pxToRem(28);
        background-color: $main-color;
        color: #fff;
        text-align: center;
      }
    }
    .item-list {
      padding: pxToRem(30) pxToRem(40);
      .item {
        display: flex;
        align-items: center;
        height: pxToRem(100);
        line-height: pxToRem(100);
        border-bottom: pxToRem(1) solid rgba(68, 189, 245, 0.3);
        .goods-name {
          width: pxToRem(300);
          font-size: pxToRem(32);
          @include ellipsis();
        }
        .number {
          width: pxToRem(240);
          text-align: left;
          font-size: pxToRem(28);
          color: #707070;
        }
        .btn-delete {
          width: pxToRem(28);
          height: pxToRem(30);
        }
      }
    }
    .picker {
      position: relative;
      margin-top: pxToRem(30);
      margin-left: pxToRem(50);
      padding-left: pxToRem(40);
      padding-right: pxToRem(40);
      width: pxToRem(650);
      height: pxToRem(68);
      line-height: pxToRem(68);
      font-size: pxToRem(28);
      box-sizing: border-box;
      border: pxToRem(1) solid #CCCCCC;
      border-radius: pxToRem(10);
      &.disabled {
        color: #9B9B9B;
      }
      .icon {
        @include middle-center-y();
        right: pxToRem(30);
        width: pxToRem(14);
        height: pxToRem(26);
        transform: rotate(90deg) translateX(-100%);
      }
    }
    .btn-submit {
      @include middle-center-x();
      bottom: pxToRem(240);
      width: pxToRem(444);
      height: pxToRem(88);
      line-height: pxToRem(88);
      text-align: center;
      font-size: pxToRem(40);
      color: #fff;
      background: linear-gradient(90deg, rgba(117, 228, 252, 1) 0%, rgba(68, 189, 245, 1) 100%);
      border-radius: pxToRem(8);
    }
  }
</style>
